<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			body {
				background-color: #ececec;
			}

			a {
				color: #333;
				text-decoration: none;
			}

			.phone {
				margin: 30px auto;
				width: 294px;
				height: 379px;
				background-color: #fff;
				float: left;
				margin: 20px 0px 30px 30px;
			}
			.phone:hover {
				box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
			}

			.phone img {
				width: 100%;
			}

			.name {
				color: #333;
				height: 21px;
				font-size: 14px;
				font-weight: 400;
				text-align: center;

			}

			.peizhi {
				color: #B0B0B0;
				font-size: 12px;
				text-align: center;
				margin: 2px 10px 10px;
			}

			.price {
				color: #FF6700;
				font-size: 14px;
				text-align: center;
				margin: 0 10px 14px;
			}

			.price span {
				color: #B0B0B0;
				text-decoration: line-through;
				margin: 0 0 0 7px;
			}
		</style>

	</head>
	<body>
		<div class="phone">
			<img src="../images/xiaomiphone.jpg" alt="">
			<h3 class="name">小米11 Pro</h3>
			<h3 class="peizhi">1/1.12''GN2｜骁龙888</h3>
			<p class="price">4499元起 <span>4499元</span></p>
		</div>
		<div class="phone">
			<img src="../images/qingchunphone.jpg" alt="">
			<h3 class="name"><a href="">小米11 青春版</a></h3>
			<h3 class="peizhi">小米11 青春版 轻薄</h3>
			<p class="price">2099元起 <span>2299元</span></p>
		</div>




	</body>
</html>
